<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

	<link rel="stylesheet" href="./css/style.css">

	<title>网上商城</title>

</head>
<body>

	<!-- 
		网站页眉,包含头部导航条 
	-->
	<header>
		<!-- 网站头部导航条，固定在顶部,导航条样式为dark，背景为dark -->
		<nav class="navbar fixed-top navbar-light shadow-sm">
	        <div class="container">
	        	<div class="input-group">
	        		<img src="./images/logo.jpg" height="40px" alt="">
					<input type="text" class="form-control" placeholder="霸王防脱" style="margin-left: 14%;">
					<div class="input-group-append" style="margin-right: 25%">
						<button class="btn btn-outline-danger" type="button"><i class="fa fa-search"></i></button>
					</div>
				</div>
	        </div> 
	    </nav>
    </header>
    <main>
    	<section id="nav-section">
    		<div class="container">
	    		<div id="logoImg" class="shadow-sm">
	    			<img src="./images/logo.png" width="190px;" alt="" />
	    		</div>
	    		<ul class="nav float-right py-1">
				  	<li class="nav-item">
				    	<a class="nav-link text-secondary" href="user_login.html">登录</a>
				  	</li>
				  	<li class="nav-item">
				    	<a class="nav-link text-secondary" href="#">|</a>
				  	</li>
					<li class="nav-item">
				    	<a class="nav-link text-secondary" href="register.html">注册</a>
				  	</li>
				  	<li class="nav-item">
				    	<a class="nav-link text-secondary" href="#">|</a>
				  	</li>
				  	<li class="nav-item">
				    	<a class="nav-link text-secondary" href="#">会员中心</a>
				  	</li>
				  	<li class="nav-item">
				    	<a class="nav-link text-secondary" href="#">|</a>
				  	</li>
				  	<li class="nav-item">
				    	<a class="nav-link text-secondary" href="#">购物指南</a>
				  	</li>
				  	<li class="nav-item">
				    	<a class="nav-link text-secondary" href="#">|</a>
				  	</li>
				  	<li class="nav-item">
				    	<a class="nav-link text-secondary" href="#">关于我们</a>
				  	</li>
				</ul>
			</div>
    	</section>
    	<section id="search-section">
    		<div class="container py-4">
    			<div class="row">
		        	<div class="input-group col-md-6 offset-md-3">
						<input type="text" class="form-control" placeholder="霸王防脱">
						<div class="input-group-append">
							<button class="btn btn-outline-danger" type="button"><i class="fa fa-search"></i></button>
						</div>
					</div>
					<div class="col-md-3">
						<button type="button" class="btn btn-outline-danger px-5" onclick="$(location).attr('href', 'shoppingCart.html');"><i class="fa fa-shopping-cart mr-1"></i>我的购物车</button>
					</div>
				</div>
	        </div> 
    	</section>
    	<section id="nav-list-section">
    		<div class="container py-4">
    			<div class="row">
		    		<ul class="nav col-md-9 offset-md-3">
		    			<li class="nav-item">
					    	<a class="nav-link text-secondary" href="#">|</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-dark" href="#">首页</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-secondary" href="#">|</a>
					  	</li>
						<li class="nav-item">
					    	<a class="nav-link text-dark" href="#">定制套餐</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-secondary" href="#">|</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-dark" href="#">安全频道</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-secondary" href="#">|</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-dark" href="#">商城卡</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-secondary" href="#">|</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-dark" href="#">蔬菜基地</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-secondary" href="#">|</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-dark" href="#">节气养生</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-secondary" href="#">|</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-dark" href="#">便民服务</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link text-secondary" href="#">|</a>
					  	</li>
					</ul>
				</div>
			</div>
    	</section>

		<!-- 轮播组件 -->
		<div class="container">
			<div class="row">
				<div class="col-sm-8 col-md-8">
					<section id="carousel-section" class="ml-auto">
			    		<!-- 设置为carousel -->
			    		<div id="myCarousel" class="carousel slide bg-dark" data-ride="carousel">
			    			<!-- 设置轮播索引，并设置0为第一个展示 -->
				        	<ol class="carousel-indicators">
					          	<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					          	<li data-target="#myCarousel" data-slide-to="1" class=""></li>
					          	<li data-target="#myCarousel" data-slide-to="2" class=""></li>
					          	<li data-target="#myCarousel" data-slide-to="3" class=""></li>
					          	<li data-target="#myCarousel" data-slide-to="4" class=""></li>
					          	<li data-target="#myCarousel" data-slide-to="5" class=""></li>
				        	</ol>
				        	<!-- 轮播内容 -->
				        	<div class="carousel-inner">
				        		<!-- 该项第一个展示 -->
				          		<div class="carousel-item active">
				            		<img class="first-slide" src="./images/1.jpg" alt="First slide">
				          		</div><!-- /.carousel-item -->
				          		<div class="carousel-item">
				            		<img class="second-slide" src="./images/2.jpg" alt="Second slide">
				          		</div><!-- /.carousel-item -->
				          		<div class="carousel-item">
				            		<img class="third-slide" src="./images/3.jpg" alt="Third slide">
				          		</div><!-- /.carousel-item -->
				          		<div class="carousel-item">
				            		<img class="third-slide" src="./images/4.jpg" alt="Third slide">
				          		</div><!-- /.carousel-item -->
				          		<div class="carousel-item">
				            		<img class="third-slide" src="./images/5.jpg" alt="Third slide">
				          		</div><!-- /.carousel-item -->
				          		<div class="carousel-item">
				            		<img class="third-slide" src="./images/6.jpg" alt="Third slide">
				          		</div><!-- /.carousel-item -->
				        	</div><!-- /.carousel-inner -->
				        	<!-- 轮播prev和next -->
			        		<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
			          			<span class="carousel-control-prev-icon"></span>
			          			<span class="sr-only">Previous</span>
			        		</a>
			        		<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
			          			<span class="carousel-control-next-icon"></span>
			          			<span class="sr-only">Next</span>
			        		</a>
			      		</div><!-- /#myCarousel -->
			    	</section>
				</div>
				<div class="col-sm-4 col-md-4">
					<div class="d-flex flex-column bd-highlight">
					    <div class="mt-1 mb-2 bd-highlight"><img src="./images/int1.jpg" width="190px" height="150px" alt=""></div>
					    <div class="mb-2 bd-highlight"><img src="./images/int2.jpg" width="190px" height="150px" alt=""></div>
					    <div class="bd-highlight"><img src="./images/int3.jpg" width="190px" height="150px" alt=""></div>
					</div>	
				</div>
			</div>
		</div>

		<section id="hot-goods">
	
			<h3 class="text-center py-5">-- 热门商品 --</h3>

			<div class="container">
    			<div class="row">
                	<div class="col-md-2 offset-md-1">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/1.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/2.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/3.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/4.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/5.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2 offset-md-1">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/6.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/7.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/8.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/9.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/10.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            	</div>
            </div>
		</section>

		<section id="lasted-goods" class="pb-5">
	
			<h3 class="text-center py-5">-- 最新商品 --</h3>

			<div class="container">
    			<div class="row">
                	<div class="col-md-2 offset-md-1">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/1.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/2.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/3.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/4.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/5.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2 offset-md-1">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/6.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/7.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/8.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/9.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            		<div class="col-md-2">
                		<!-- 样式为card -->
              			<div class="card mb-4">
                			<img class="card-img-top" src="./images/index-img/10.jpg" data-holder-rendered="true">
                			<div class="card-body text-center">
                  				<a class="text-muted">Lorem</a><br />
                    			<a class="text-danger">$ 88.88</a>
                			</div>
              			</div>
            		</div>
            	</div>
            </div>
		</section>
    </main>

    <footer>
    	<div class="container">
			<ul class="nav col-md-8 offset-md-2 pt-3">
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">关于我们</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-secondary" href="#">|</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">联系我们</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-secondary" href="#">|</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">招贤纳士</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-secondary" href="#">|</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">法律声明</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-secondary" href="#">|</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">友情链接</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-secondary" href="#">|</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">支付方式</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-secondary" href="#">|</a>
				</li>		
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">配送方式</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-secondary" href="#">|</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">服务声明</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-secondary" href="#">|</a>
				</li>
				<li class="nav-item">
					<a class="nav-link text-dark" href="#">广告声明</a>
				</li>
			</ul>
		</div>
		<div class="text-center py-3">Copyright © 2018-2019 网上商城 版权所有</div>
    </footer>

	  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>